import React, { useState } from 'react';
import html2canvas from 'html2canvas';

const ShareImageComponent = () => {
  const [imageURL, setImageURL] = useState(null);

  const generateAndShareImage = () => {
    const element = document.getElementById('content-to-share'); // 将要生成图片的DOM元素

    html2canvas(element).then((canvas) => {
      // 将Canvas转为数据URL
      const dataURL = canvas.toDataURL('image/png');

      // 设置生成的图片URL
      setImageURL(dataURL);
    });
  };

  return (
    <div>
      {/* 将要生成图片的DOM元素 */}
      <div id="content-to-share">
        <h1>这是要分享的内容</h1>
        <p>一些文本内容和图像</p>
        <img src="your-image-url.jpg" alt="示例图像" />
      </div>



      {/* 生成和分享图片按钮 */}
      <button onClick={generateAndShareImage}>生成并分享图片</button>
    </div>
  );
};

export default ShareImageComponent;